<template>
  <PageMain :force-title="forceTitle" :before-back="titleBeforeBack">
    <template #header>
      <a-steps :current="step" changeable @change="handlerStepChange">
        <a-step>资源基础信息</a-step>
        <a-step>添加关联</a-step>
      </a-steps>
    </template>
    <template #body>
      <div class="layout resource-save w-full h-full overflow-hidden overflow-y-auto box-border bg-white p-0 " ref="RefLayout">
        <Step1Box
          v-model:form-data="formData"
          @next-step="toStep2"
          @quit="$router.push({ name: 'resource' })"
          v-if="step == 1" 
          ref="RefStep1Box"
        />
        <Step2Box
          v-model:form-data="formData"
          @submit="submitData"
          @to-prev="titleBeforeBack"
          v-if="step === 2"
        />
      </div>
    </template>
  </PageMain>
</template>
<script lang="ts" setup>
import * as Api from '@/api/assetManagement/assetManagement';
import * as T from '@/api/assetManagement/assetManagement_type';
import { Message } from '@arco-design/web-vue';
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import PageMain from '@/components/PageBox.vue';
import Step1Box from './components/SaveStep1.vue';
import Step2Box from './components/SaveStep2.vue';

const router = useRouter()
const route = useRoute()
const RefLayout = ref()
const step = ref(1)
const formData = ref<T.TResourceItem>(T.DefaultTResourceItem())
const forceTitle = computed(() => {
  return step.value === 1 ? '' : '添加关联'
})
const dataId = ref('')
const RefStep1Box = ref()

function titleBeforeBack() {
  if (step.value === 1) {
    return true
  }
  step.value = 1
  return false
}

function handlerStepChange(num: number) {
  if (num === 1) {
    step.value = num
    return
  }
  if (!RefStep1Box.value) {
    return
  }
  RefStep1Box.value.next(() => {
    step.value = num
  })
}

// 下一步
function toStep2(data: T.TResourceItem) {
  formData.value = data
  step.value = 2
}

// 提交
function submitData() {
  const { id } = formData.value
  if (route.name === 'resourceadd' && !id) {
    Api.Create(formData.value).then(rs => {
      const { code, data, message } = rs as any
      if (code === 200) {
        Message.success('保存成功')
        router.push({
          name: 'resource'
        })
        return
      }
      Message.warning(`保存失败[${message}]`)
    }).catch(err => {
      const { code, message } = err
      if (code){
        Message.error(message)
      }
    })
  } 
  if(route.name === 'resourceedit' && id) {
    const d = { ...formData.value}
    Api.Edit(d).then(rs => {
      const { code, data, message } = rs as any
      if (code === 200) {
        Message.success('编辑成功')
        router.push({
          name: 'resource'
        })
        return
      }
      Message.warning(`编辑失败[${message}]`)
    }).catch(err => {
      const { code, message } = err
      if (code){
        Message.error(message)
      }
    })
  }

  if(route.name === 'resourceupdate' && id) {
    const d = { ...formData.value}
    Api.Update(d).then(rs => {
      const { code, data, message } = rs as any
      if (code === 200) {
        Message.success('更新成功')
        router.push({
          name: 'resource'
        })
        return
      }
      Message.warning(`更新失败[${message}]`)
    }).catch(err => {
      const { code, message } = err
      if (code){
        Message.error(message)
      }
    })
  }
}

function getData(id: string | number) {
  if (!id) return
  Api.GetResourceInfo(+dataId.value).then(res => {
    if (res.code === 200 && res.data) {
      const { owner_org_code } = res.data
      let orgs: any[] = []
      owner_org_code.forEach((v: any) => {
        orgs.push(v.code)
      })
      res.data.owner_org_code = orgs
      formData.value = res.data
    } else {
      Message.error(res.errMsg)
    }
  })
}

onMounted(() => {
  const { name } = route
  if (name === 'resourceadd') {
    // ..
  }
  if (name === 'resourceedit' || name === 'resourceupdate') {
    const { id } = route.params
    console.log(id,"................")
    const { type } = route.query
    if (!id) {
      Message.warning('参数错误, 无法初始化数据')
      router.push({ name: 'resource' })
      return
    }
    if (type) {
      step.value = 2
    }
    dataId.value = id as any
    getData(dataId.value)
  }
});
</script>

<style lang="less" scoped>
.resource-save{
  display: flex; justify-content: center; align-items: center; flex-direction: column;
  .title-box {
    font-family: Microsoft YaHei;
    font-size: 14px;
    font-weight: bold;
    color: #394D73;
  }
  .content-box {
    flex: 1;
    .arco-form{
      .arco-row{
        margin-bottom: 20px;
        .arco-col{
          height: 100%; overflow: hidden; box-sizing: border-box;
          .arco-form-item{
            display: flex; justify-content: flex-start; align-items: center; flex-direction: column;
           :deep(.arco-form-item-label-col){
              width: 100%; padding: 0; box-sizing: border-box;
              display: flex; justify-content: flex-start; align-items: center;
            }
            :deep(.arco-form-item-wrapper-col){

            }
          }
          .exception{
            width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-direction: row;
            margin-top: 32px;
            :deep(.arco-form-item-label-col){
              width: auto; padding-right: 20px; box-sizing: border-box;
              display: flex; justify-content: flex-start; align-items: center;
            }
            :deep(.arco-form-item-wrapper-col){
              flex: 1;
            }
          }
        }
      }
    }
  }
  .footer-box{
    box-shadow: 0px 0px 6px 0px rgba(57, 77, 115, 0.1);
  }
}
</style>
